<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="300"
      height="300"
      style="background-color: #359b39"
    ></canvas>
  </body>
  <script>
    var clicks = null;
    document
      .getElementById("canvas")
      .addEventListener("click", drawLine, false);
    function getCursorPosition(e) {
      var x;
      var y;
      if (e.pageX != undefined && e.pageY != undefined) {
        x = e.pageX;

        y = e.pageY;
      } else {
        x =
          e.clientX +
          document.body.scrollLeft +
          document.documentElement.scrollLeft;

        y =
          e.clientY +
          document.body.scrollTop +
          document.documentElement.scrollTop;
      }
      return [x, y];
    }

    function drawLine(e) {
      context = this.getContext("2d");
      x = getCursorPosition(e)[0] - this.offsetLeft;
      y = getCursorPosition(e)[1] - this.offsetTop;
      if (clicks != null) {
        if (x - clicks[0] === 0 && y - clicks[1] === 0) return;
        context.beginPath();
        context.moveTo(clicks[0], clicks[1]);
        context.lineTo(x, y, 6);
        context.strokeStyle = "#000000";
        context.stroke();
      }
      clicks = [x, y];
    }
  </script>
</html>
